<template>
  <div class="surrender-container">
    <div class="banner" style="background-image: url('/src/assets/background/bg2.jpg')">
      <h1 class="page-title">送养申请</h1>
      <p class="page-subtitle">为它们寻找一个更好的归宿</p>
    </div>

    <div class="content">
      <el-card class="form-card">
        <h2 class="form-title">申请送养</h2>
        <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
          <div class="form-section">
            <h3 class="section-title">基本信息</h3>
            <el-form-item label="宠物名称" prop="pet_name">
              <el-input v-model="form.pet_name" placeholder="请输入宠物名称"></el-input>
            </el-form-item>

            <el-form-item label="宠物图片" prop="pet_image">
              <el-upload class="avatar-uploader" action="/api/Petfile/upload" :show-file-list="false"
                :on-success="handleImageSuccess">
                <img v-if="form.pet_image" :src="`/api/Petfile/${form.pet_image}`" class="avatar">
                <el-icon v-else class="avatar-uploader-icon">
                  <Plus />
                </el-icon>
              </el-upload>
            </el-form-item>

            <el-form-item label="宠物类型" prop="pet_type_id">
              <el-select v-model="form.pet_type_id" placeholder="请选择宠物类型" class="full-width">
                <el-option v-for="type in petTypes" :key="type.id" :label="type.type" :value="type.id">
                </el-option>
              </el-select>
            </el-form-item>

            <div class="form-row">
              <el-form-item label="宠物年龄" prop="pet_age">
                <el-input-number v-model="form.pet_age" :min="0" :max="20" class="full-width"></el-input-number>
              </el-form-item>

              <el-form-item label="宠物性别" prop="pet_gender">
                <el-radio-group v-model="form.pet_gender">
                  <el-radio label="male">公</el-radio>
                  <el-radio label="female">母</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
          </div>

          <div class="form-section">
            <h3 class="section-title">健康状况</h3>
            <el-form-item label="健康状况" prop="health_status">
              <el-input type="textarea" v-model="form.health_status" placeholder="请描述宠物的健康状况" :rows="3"></el-input>
            </el-form-item>

            <div class="form-row">
              <el-form-item label="是否绝育" prop="is_sterilized">
                <el-switch v-model="form.is_sterilized" active-text="是" inactive-text="否"></el-switch>
              </el-form-item>

              <el-form-item label="是否接种疫苗" prop="is_vaccinated">
                <el-switch v-model="form.is_vaccinated" active-text="是" inactive-text="否"></el-switch>
              </el-form-item>
            </div>
          </div>

          <div class="form-section">
            <h3 class="section-title">联系方式</h3>
            <el-form-item label="联系电话" prop="contact_phone">
              <el-input v-model="form.contact_phone" placeholder="请输入联系电话"></el-input>
            </el-form-item>

            <el-form-item label="联系地址" prop="contact_address">
              <el-input v-model="form.contact_address" placeholder="请输入联系地址"></el-input>
            </el-form-item>
          </div>

          <div class="form-section">
            <h3 class="section-title">其他信息</h3>
            <el-form-item label="送养原因" prop="surrender_reason">
              <el-input type="textarea" v-model="form.surrender_reason" placeholder="请说明送养原因" :rows="3"></el-input>
            </el-form-item>

            <el-form-item label="宠物描述" prop="pet_description">
              <el-input type="textarea" v-model="form.pet_description" placeholder="请描述宠物的性格、习性等" :rows="4"></el-input>
            </el-form-item>
          </div>

          <div class="form-actions">
            <el-button type="primary" @click="submitForm" size="large">提交申请</el-button>
            <el-button @click="resetForm" size="large">重置</el-button>
          </div>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import request from '@/utils/request'

const formRef = ref(null)
const petTypes = ref([])

const form = ref({
  pet_name: '',
  pet_image: '',
  pet_type_id: '',
  pet_age: 0,
  pet_gender: '',
  health_status: '',
  is_sterilized: false,
  is_vaccinated: false,
  contact_phone: '',
  contact_address: '',
  surrender_reason: '',
  pet_description: '',
  user_id: JSON.parse(localStorage.getItem('userInfo')).id
})

const validatePhone = (rule, value, callback) => {
  const phoneRegex = /^1[3-9]\d{9}$/
  if (!value) {
    callback(new Error('请输入手机号'))
  } else if (!phoneRegex.test(value)) {
    callback(new Error('请输入正确的手机号'))
  } else {
    callback()
  }
}

const rules = {
  pet_name: [{ required: true, message: '请输入宠物名称', trigger: 'blur' }],
  pet_image: [{ required: true, message: '请上传宠物图片', trigger: 'change' }],
  pet_type_id: [{ required: true, message: '请选择宠物类型', trigger: 'change' }],
  pet_age: [{ required: true, message: '请输入宠物年龄', trigger: 'blur' }],
  pet_gender: [{ required: true, message: '请选择宠物性别', trigger: 'change' }],
  health_status: [{ required: true, message: '请描述健康状况', trigger: 'blur' }],
  contact_phone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { validator: validatePhone, trigger: 'blur' }
  ],
  contact_address: [{ required: true, message: '请输入联系地址', trigger: 'blur' }],
  surrender_reason: [{ required: true, message: '请说明送养原因', trigger: 'blur' }],
  pet_description: [{ required: true, message: '请描述宠物情况', trigger: 'blur' }]
}

const handleImageSuccess = (res) => {
  form.value.pet_image = res.data
}

const submitForm = async () => {
  if (!formRef.value) return
  
  await formRef.value.validate(async (valid) => {
    if (valid) {
      try {
        await request.post('/petSurrender/add', form.value)
        ElMessage.success('送养申请提交成功')
        resetForm()
      } catch (error) {
        ElMessage.error('送养申请提交失败')
      }
    }
  })
}

const resetForm = () => {
  if (!formRef.value) return
  formRef.value.resetFields()
  form.value.pet_image = ''
}

onMounted(async () => {
  try {
    const res = await request.get('/types/all')
    petTypes.value = res.data
  } catch (error) {
    console.error('获取宠物类型失败:', error)
  }
})
</script>

<style scoped>
.surrender-container {
  background-color: #f5f7fa;
  min-height: 100vh;
}

.banner {
  background-size: cover;
  background-position: center;
  padding: 200px 20px;
  text-align: center;
  color: white;
  position: relative;
  transition: all 0.5s ease;
}

.banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
  transition: background 0.3s ease;
}

.banner:hover::before {
  background: rgba(0, 0, 0, 0.3);
}

.page-title {
  font-size: 42px;
  margin-bottom: 20px;
  font-weight: 700;
  position: relative;
  z-index: 2;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
  letter-spacing: 2px;
}

.page-subtitle {
  font-size: 20px;
  opacity: 0.95;
  position: relative;
  z-index: 2;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
  letter-spacing: 1px;
}

.content {
  max-width: 1000px;
  margin: -90px auto 40px;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}

.form-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  padding: 40px;
}

.form-title {
  font-size: 28px;
  color: #303133;
  margin-bottom: 40px;
  text-align: center;
  font-weight: 600;
}

.form-section {
  margin-bottom: 40px;
  padding-bottom: 30px;
  border-bottom: 1px solid #ebeef5;
}

.form-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.section-title {
  font-size: 20px;
  color: #303133;
  margin-bottom: 25px;
  font-weight: 600;
  border-left: 4px solid #409EFF;
  padding-left: 15px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.full-width {
  width: 100%;
}

.avatar-uploader {
  border: 2px dashed #d9d9d9;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 200px;
  height: 200px;
  transition: all 0.3s ease;
}

.avatar-uploader:hover {
  border-color: #409EFF;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64,158,255,0.2);
}

.avatar-uploader-icon {
  font-size: 32px;
  color: #8c939d;
  width: 200px;
  height: 200px;
  text-align: center;
  line-height: 200px;
}

.avatar {
  width: 200px;
  height: 200px;
  display: block;
  object-fit: cover;
}

.form-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
}

:deep(.el-form-item__label) {
  font-weight: 500;
  color: #606266;
}

:deep(.el-input__wrapper),
:deep(.el-textarea__wrapper) {
  box-shadow: 0 0 0 1px #dcdfe6 inset;
  transition: all 0.3s ease;
}

:deep(.el-input__wrapper:hover),
:deep(.el-textarea__wrapper:hover) {
  box-shadow: 0 0 0 1px #409EFF inset;
}

:deep(.el-input__wrapper.is-focus),
:deep(.el-textarea__wrapper.is-focus) {
  box-shadow: 0 0 0 1px #409EFF inset;
}

@media (max-width: 768px) {
  .content {
    margin-top: -60px;
  }

  .form-card {
    padding: 20px;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .page-title {
    font-size: 32px;
  }

  .page-subtitle {
    font-size: 16px;
  }
}
</style>